<template>
  <el-container>
    <!-- <el-main class="left-guide">
        <el-menu :default-active="checkItem" @select="menuSelect">
          <el-menu-item v-for="item in guideList" :key="item.index" :index="item.index">
            <i class="el-icon-question"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-main>
      <el-main class="right-content">
        <bs-main class="bsMain"> </bs-main>
      </el-main> -->
    <el-main class="leftMain">
      <el-menu :default-active="checkItem" @select="menuSelect">
        <el-menu-item
          v-for="item in guideList"
          :key="item.index"
          :index="item.index"
        >
          <span slot="title">{{ $t(item.title) }}</span>
        </el-menu-item>
      </el-menu>
    </el-main>
    <el-main class="rightMain">
      <bs-main class="bsMain">
        <help-detail ref="detail" :check-index="helpIndex"></help-detail>
      </bs-main>
    </el-main>
  </el-container>
</template>

<script>
import HelpDetail from './components/HelpDetail'
import { guideArray } from '@/const/index.js'

export default {
  name: 'helpcenter',
  components: {
    HelpDetail,
  },
  data() {
    return {
      checkItem: '0',
      helpIndex:0,
      guideList: guideArray
    }
  },
  methods: {
    menuSelect(index, indexPath) {
      this.$refs.detail.updateData(Number(index))
    },
  },
}
</script>
<style lang="scss" scoped>
// import '@/styles/bs-common.scss';
// ::v-deep .el-card__body {
//   padding: 10px;
// }
// .left-guide {
//   max-width: 240px;
//   background-color: $bg-ff;
//   height: calc(100vh - 170px);
//   margin: 0px;
//   padding: 20px 0px 0px 0px;
//   border: 1px solid $bg-dc;

// }
.rightMain {
  background-color: $bg-ff;
}
.el-container {
  display: inline-block;
  width: 100%;
}
::v-deep .el-menu-item {
  height: 40px;
  line-height: 40px;
}
::v-deep .leftMain {
  min-width: 240px !important;
  width: 240px !important;
  float: left;
  margin-right: 10px;
}
::v-deep .bs-main-layout__main {
  padding: 0;
}

.el-menu {
  border-right: 0;
}
.el-radio {
  margin-bottom: 28px;
}
.bsMain {
  padding: 0;
}
.el-menu-item.is-active {
  color: $defaultBlue !important;
  background: #f9f9f9;
}
.el-menu-item:hover,
.el-menu-item:focus {
  outline: none;
  background-color: #f9f9f9;
}
// .right-content {
//   background-color: $bg-ff;
//   height: calc(100vh - 170px);
//   margin: 0px 0px 0px 8px;
//   border: 1px solid $bg-dc;
//   position: relative;
//   overflow: hidden;
//   // white-space: nowrap;
// }
// .guide-item {
//   font-size: 14px;
//   margin-bottom: 28px;
// }
</style>
